<template>
  <div class="explanation-page bg-f0f9f9">
    <!-- 头部 -->
    <div class="header d-flex align-items-center">
      <router-link :to="`/english/cloze?year=${this.$route.query.year}`" class="text-dark">
        <i class="bi bi-chevron-left fs-4"></i>
      </router-link>
      <h5 class="mb-0 mx-auto">答案解析</h5>
    </div>

    <div v-if="error" class="alert alert-danger m-3">
      {{ error }}
    </div>

    <template v-else>
      <!-- 解析内容 -->
      <div class="explanation-container" v-if="analysisData">
        <div v-for="answer in analysisData.answers" :key="answer.question_number" class="answer-card">
          <!-- 题号和答案 -->
          <div class="card-header d-flex justify-content-between align-items-center">
            <h6 class="mb-0">第{{ answer.question_number }}题</h6>
            <div class="answer-badge">
              正确答案：<span class="answer">{{ answer.answer }}</span>
            </div>
          </div>

          <div class="card-body">
            <!-- 上下文分析 -->
            <div class="analysis-section">
              <h6 class="section-title">
                <i class="bi bi-text-paragraph me-2"></i>上下文分析
              </h6>
              <p>{{ answer.analysis.context }}</p>
            </div>

            <!-- 语法要点 -->
            <div class="analysis-section">
              <h6 class="section-title">
                <i class="bi bi-bookmark-fill me-2"></i>语法要点
              </h6>
              <p>{{ answer.analysis.grammar_point }}</p>
            </div>

            <!-- 搭配分析 -->
            <div class="analysis-section">
              <h6 class="section-title">
                <i class="bi bi-link-45deg me-2"></i>搭配分析
              </h6>
              <p>{{ answer.analysis.collocation }}</p>
            </div>

            <!-- 推理过程 -->
            <div class="analysis-section">
              <h6 class="section-title">
                <i class="bi bi-lightbulb-fill me-2"></i>推理过程
              </h6>
              <p>{{ answer.analysis.reasoning }}</p>
            </div>

            <!-- 错误选项分析 -->
            <div class="analysis-section">
              <h6 class="section-title">
                <i class="bi bi-x-circle-fill me-2"></i>错误选项分析
              </h6>
              <div v-for="(explanation, option) in answer.analysis.wrong_options" 
                   :key="option" 
                   class="wrong-option">
                <div class="option-header">
                  <span class="option-label">{{ option }}</span>
                  {{ explanation }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Loading状态 -->
      <div v-if="loading" class="d-flex justify-content-center my-4">
        <div class="spinner-border text-primary" role="status">
          <span class="visually-hidden">Loading...</span>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import http from '@/router/http'

export default {
  name: 'ClozeExplanationView',
  data() {
    return {
      loading: false,
      error: null,
      articleData: null,
      analysisData: null,
    }
  },
  async created() {
    // 从路由参数中获取值
    const params = {
      year: this.$route.query.year,
      subjectName: this.$route.query.subjectName,
      paperType: this.$route.query.paperType,
      moduleType: this.$route.query.moduleType,
      currentQuestionIndex: this.$route.query.currentQuestionIndex
    }

    // 检查必要参数是否存在
    if (!params.year || !params.subjectName || !params.paperType || !params.moduleType || !params.currentQuestionIndex) {
      this.error = '缺少必要的参数'
      return
    }

    await this.fetchQuestionData(params)
  },
  methods: {
    async fetchQuestionData(params) {
      try {
        this.loading = true
        this.error = null

        const questionResponse = await http.get('/student/question/getQuestionInfoForEnglish', { params })

        if (questionResponse.data.code === 1) {
          const questionInfo = questionResponse.data.response
          this.articleData = {
            article: questionInfo.article,
            questions: questionInfo.questions
          }
          
          // 获取解析
          const aiResponse = await http.post('/student/ai/forward/english/cloze_test', {
            article: questionInfo.article,
            questions: questionInfo.questions
          })

          if (aiResponse.data.code === 1 && aiResponse.data.response) {
            try {
              const result = JSON.parse(aiResponse.data.response.result)
              if (result && Array.isArray(result.answers)) {
                this.analysisData = result
              } else {
                this.error = '解析数据格式不正确'
                console.error('Invalid data format:', result)
              }
            } catch (parseError) {
              if (aiResponse.data.response.result && Array.isArray(aiResponse.data.response.result.answers)) {
                this.analysisData = aiResponse.data.response.result
              } else {
                this.error = '无法解析返回的数据'
                console.error('Parse error:', parseError)
              }
            }
          } else {
            this.error = aiResponse.data.message || '获取解析失败'
          }
        } else {
          this.error = questionResponse.data.message || '获取题目信息失败'
        }
      } catch (error) {
        console.error('Error fetching data:', error)
        this.error = error.message || '加载页面时发生错误'
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.bg-f0f9f9 {
  background-color: #f0f9f9;
  min-height: 100vh;
}

.header {
  padding: 15px;
  background: white;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.explanation-container {
  padding: 15px;
  margin-bottom: 60px;
}

.answer-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin-bottom: 20px;
  overflow: hidden;
}

.card-header {
  background: #f8f9fa;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.card-body {
  padding: 20px;
}

.answer-badge {
  background: #e8f5e9;
  color: #2e7d32;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
}

.answer {
  font-weight: bold;
  font-size: 1.1em;
}

.section-title {
  color: #1976d2;
  font-size: 1rem;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.analysis-section {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

.analysis-section:last-child {
  margin-bottom: 0;
}

.analysis-section p {
  margin-bottom: 0;
  color: #424242;
  line-height: 1.6;
}

.wrong-option {
  background: white;
  border-radius: 6px;
  margin-bottom: 8px;
  border-left: 3px solid #dc3545;
}

.wrong-option:last-child {
  margin-bottom: 0;
}

.option-header {
  padding: 10px 12px;
  color: #424242;
}

.option-label {
  background: #dc3545;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 8px;
  font-size: 0.9rem;
}

/* 添加一些动画效果 */
.answer-card {
  transition: transform 0.2s ease;
}

.answer-card:hover {
  transform: translateY(-2px);
}

.section-title i {
  transition: transform 0.2s ease;
}

.section-title:hover i {
  transform: scale(1.2);
}
</style> 